<template>
    <div class="footer">
      <div class="top">
        <ul>
          <li>
            <h4>客户服务</h4>
            <div>
              <span class="bor">
                <i class="iconfont icon-kefu"></i>
               <p>在线客服</p>
              </span>
              <span class="bor">
                <i class="iconfont   icon-wode_wentifankui_48"></i>
                <p>问题反馈</p>
              </span>
            </div>
          </li>
          <li>
            <h4>关注我们</h4>
            <div>
              <span class="bor">
                <i class="iconfont   icon-weixin"></i>
                <p>公众号</p>
              </span>
              <span class="bor">
                <i class="iconfont  icon-xinlangweibo"></i>
               <p>微博</p>
              </span>
            </div>
          </li>
          <li>
            <h4>下载App</h4>
            <div>
               <span class="bor"><img src="../../public/img/footimg/qrcode.jpg" alt=""></span>
              <span>
               <p class="pm">扫描二维码</p>
               <p class="pm">立刻下载app</p>
               <p class="pm"> <el-button type="primary">下载页面</el-button></p>
              </span>
            </div>
          </li>
          <li>
            <h4>服务热线</h4>
         
              <p class="rxpm">400-0000-000</p>
              <p class="rxpm">周一至周日 8:00-18:00</p>
      
          </li>
        </ul>
      </div>
      <div class="bottom">
          <ul>
            <li>
              <i class="iconfont icon-gouhaowu"></i>
              价格亲民
            </li>
            <li>
              <i class="iconfont icon-dianzan"></i>
              物流快捷
            </li>
            <li>
              <i class="iconfont icon-zhinengyongche"></i>
              品质新鲜
            </li>
          </ul>
          <div>
            <p>关于我们|帮助中心|售后服务|配送与验收|商务合作|搜索推荐|友情链接</p>
            <p>CopyRight @小兔鲜儿</p>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  
  </script>
  
  <style lang="scss" scoped>
  .footer {
    height: 658px;
    background-color: #333;
     .top{
      padding: 0 20px;
      height: 290px;
      background-color: #fff;
      padding-top: 45px;
      ul{
        display: flex;
        justify-content: space-between;
        li{
          width: 25%;
          height: 200px;
          text-align: center;
          padding-top: 20px;
          h4{
            color: #999;
            font-size: 18px;
            margin-bottom:20px ;
          }
          div{
            display: flex;
            justify-content: center;
              .bor{
                width: 100px;
                height: 100px;
                border: 1px solid #ededed;
  
                .iconfont{
                  display: block;
                  width: 100%;
                  font-size: 38px;
                  color: #666;
                  margin: 10px 0;
                }
              }
              .pm{
                margin-top:7px ;
              }
              span{
                margin-left: 20px;
              }
              
          }
          .rxpm:nth-of-type(1){
                   margin-top: 40px;
                   font-size: 24px;
              }
          .rxpm:nth-of-type(2){
                   color: #999;
              }
        }
        li:not(li:nth-of-type(1)){
          border-left: 1px solid #999;
        }
      }
     }
     .bottom{
      
       width: 100%;
       height: 368px;
        display:flex ;
        flex-direction:column;
        justify-content: space-around;
        ul{
          display: flex;
          padding: 0 140px;
          justify-content: space-between;
          font-size: 32px;
          li{
             color: #fff;
             .iconfont{
              font-size: 32px;
             }
          }
        }
        div{
          color: #999;
          text-align: center;
          font-size: 18px;
          p{
            margin-bottom:20px ;
          }
        }
     }
  }
  </style>